import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';
import { MyColors } from '../styles/MyColors';

interface TodoItemProps {
    title: string;        // 待办标题
    isCompleted: boolean; // 是否完成
    onToggle: () => void; // 切换完成状态的回调
    onDelete: () => void; // 删除待办的回调
};

export default function TodoItem({ title, isCompleted, onToggle, onDelete }: TodoItemProps) {
    const theme = useContext(ThemeContext);
    return (
        <TouchableOpacity
            style={[styles.container, { backgroundColor: theme === 'light' ? MyColors.light : MyColors.dark }]}
            onLongPress={onDelete} // 长按删除
        >
            {/* 点击切换完成状态 */}
            <TouchableOpacity style={styles.checkbox} onPress={onToggle}>
                <Text
                    style={[styles.checkboxText, { color: isCompleted ? MyColors.result : (theme === "light" ? MyColors.black : MyColors.white) }]}
                >
                    {isCompleted ? '✅' : '☐'}
                </Text>
            </TouchableOpacity>
            <View>
                <Text style={[styles.title, { color: theme === "light" ? MyColors.black : MyColors.white, textDecorationLine: isCompleted ? 'line-through' : 'none' }]}>{title}</Text>
            </View>
        </TouchableOpacity >
    )
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 16,
        marginVertical: 8,
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#ddd',
    },
    checkbox: {
        marginRight: 12,
    },
    checkboxText: {
        fontSize: 20,
    },
    title: {
        fontSize: 18,
    },
})